<template>
  <!-- 不需要根标签了 -->
  <h1>hello vue3</h1>
  <p>{{ count }}</p>
  <p>{{ formattedCount }}</p>

  <button @click="count++">按钮</button>

  <p>{{ firstName }}</p>
  <p>{{ lastName }}</p>
  <input type="text" v-model="fullName" />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  data() {
    // vue3中data只能写函数形式
    return {
      count: 0,
      firstName: "lao",
      lastName: "wang",
    };
  },
  /*
    计算属性和监视属性区别：
      1. 计算属性有缓存，监视属性没有
      2. 监视属性可以处理异步操作，计算属性不能处理异步操作
      3. 计算属性一定有返回值，监视属性没有返回值
        计算属性依赖某些数据进行计算，得到返回值进行展示
        监视属性监视已有属性变化，做一些其他事
      4. 计算属性会产生新的属性，监视没有
  */
  computed: {
    // 只读
    formattedCount() {
      return this.count + "次";
    },
    // 可读可写
    fullName: {
      get() {
        return this.firstName + " " + this.lastName;
      },
      set(val: string) {
        const [firstName, lastName] = val.split(" ");
        this.firstName = firstName;
        this.lastName = lastName;
      },
    },
  },
  watch: {
    // count(newVal, oldVal) {}
    count: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      // immediate: true, // 第一次触发回调
      // deep: true // 深度监视
    },
  },
});
</script>

<style scoped></style>
